'use client';

import React from 'react';
import Title from "../Title";
import Box from "./Box";
import a from "./a.svg";
import b from "./b.svg";
import { Space } from 'antd';
import { useStatisticsData } from '../../hooks/useStatisticsData';
import styles from '../../pages.module.scss';
import { px2vw, px2vh, responsive } from '@/app/cg06/utils/responsive'; 

const ServiceOrderStatistics: React.FC = () => {
	const { data } = useStatisticsData();

	return (
		<Space style={{ padding: px2vw(24) + ' ' + px2vw(24) + ' ' + px2vw(24) + ' ' + px2vw(24), borderRadius: px2vw(16) }} direction="vertical" size={10} className={styles.spaceWrap}>
			<Title title="服务订单统计" subTitle='累计数据'/>
			<Space size={12} style={{ marginTop: px2vh(10), marginBottom: px2vh(10) }}>
				<Box icon={a.src} label="拖车订单数" value={Number(data?.trailerOrderCount || 0)} unit="单" />
				<Box icon={b.src} label="仓储装卸服务订单数" value={Number(data?.storageOrderCount || 0)} unit="单" />
			</Space>
		</Space>
	);
}

export default ServiceOrderStatistics;

